<!-- yangbuyi Copyright (c) https://yby6.com 2023. -->

<template>
  <!-- #ifdef APP-NVUE -->
  <cell>
    <!-- #endif -->
    <view
      class="u-list-item"
      :ref="`u-list-item-${anchor}`"
      :anchor="`u-list-item-${anchor}`"
      :class="[`u-list-item-${anchor}`]"
    >
      <slot />
    </view>
    <!-- #ifdef APP-NVUE -->
  </cell>
  <!-- #endif -->
</template>

<script>
import props from "./props.js";
// #ifdef APP-NVUE
const dom = uni.requireNativePlugin("dom");
// #endif
/**
 * List 列表
 * @description 该组件为高性能列表组件
 * @tutorial https://www.uviewui.com/components/list.html
 * @property {String | Number}	anchor	用于滚动到指定item
 * @example <u-list-ite v-for="(item, index) in indexList" :key="index" ></u-list-item>
 */
export default {
  name: "u-list-item",
  mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
  data() {
    return {
      // 节点信息
      rect: {},
      index: 0,
      show: true,
      sys: uni.$u.sys(),
    };
  },
  computed: {},
  inject: ["uList"],
  watch: {
    // #ifndef APP-NVUE
    "uList.innerScrollTop"(n) {
      const preLoadScreen = this.uList.preLoadScreen;
      const windowHeight = this.sys.windowHeight;
      if (n <= windowHeight * preLoadScreen) {
        this.parent.updateOffsetFromChild(0);
      } else if (this.rect.top <= n - windowHeight * preLoadScreen) {
        this.parent.updateOffsetFromChild(this.rect.top);
      }
    },
    // #endif
  },
  created() {
    this.parent = {};
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      // 初始化数据
      this.updateParentData();
      this.index = this.parent.children.indexOf(this);
      this.resize();
    },
    updateParentData() {
      // 此方法在mixin中
      this.getParentData("u-list");
    },
    resize() {
      this.queryRect(`u-list-item-${this.anchor}`).then((size) => {
        const lastChild = this.parent.children[this.index - 1];
        this.rect = size;
        const preLoadScreen = this.uList.preLoadScreen;
        const windowHeight = this.sys.windowHeight;
        // #ifndef APP-NVUE
        if (lastChild) {
          this.rect.top = lastChild.rect.top + lastChild.rect.height;
        }
        if (
          size.top >=
          this.uList.innerScrollTop + (1 + preLoadScreen) * windowHeight
        )
          this.show = false;
        // #endif
      });
    },
    // 查询元素尺寸
    queryRect(el) {
      return new Promise((resolve) => {
        // #ifndef APP-NVUE
        this.$uGetRect(`.${el}`).then((size) => {
          resolve(size);
        });
        // #endif

        // #ifdef APP-NVUE
        const ref = this.$refs[el];
        dom.getComponentRect(ref, (res) => {
          resolve(res.size);
        });
        // #endif
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../libs/css/components.scss";

.u-list-item {
}
</style>
